<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
    <script src="../script/jquery-1.10.min.js"></script>
    <link rel="stylesheet" href="../css_script/basic.css">
    <script>
        $(document).ready(function () {

            var hrefarr
            hrefarr = $(".table tbody td > a");
            console.log(hrefarr.length)
            hrefarr.each(function (index, elem) {
                var tmphref = $(elem).attr("href")
                $(elem).attr("href", "http://www.w3school.com.cn" + tmphref)
                $(elem).attr("target", "blank")
            })
        })
    </script>
</head>

<body>

<div class="container">
    <div class="row">
        <div class="col-sm-4" style="border: 1px solid #cccccc;font-weight: bold;">
            <h4>bfc （block format context）解决margin塌陷</h4>
            <h4>margin-top: 150px 应该对应父元素 向下150px,但实际是和父元素一起向下（塌陷）</h4>
            <div><h5>父元素设置样式解决</h5>
                <ul>
                    <li>postition:absolute</li>
                    <li>display:inline-block</li>
                    <li>float:left/right</li>
                    <li>overflow:hidden</li>
                </ul>
            </div>
            <div style="width: 100px;height:100px;background: black;overflow: hidden">
                <div style="width: 50px;height:50px;background: green;margin-top: 50px">


                </div>
            </div>
        </div>
        <div class="col-sm-4" style="border: 1px solid #cccccc;font-weight: bold;">
            <h4>清除浮动流 clear</h4>
            <h4>希望浮动元素后面元素，不会覆盖浮动元素，按照正常元素排列</h4>
            <div class="wrapper" style="border: 3px solid blue;">
                <div class="hw100" style="border: 1px solid green">1</div>
                <div class="hw100" style="border: 1px solid green">2</div>
                <div class="hw100" style="border: 1px solid green">3</div>
            </div>
            <p id="pp">伪元素，clear 才会换行</p>
            <p>abcddefe</p>

        </div>
        <div class="col-sm-4" style="border: 1px solid #cccccc;font-weight: bold;color: #424242;">
            <div>
                <h4>浮动流 导航栏</h4>
                <div>
                    <ul class="nav">
                        <li class="list-item">
                            <a href="#">京东</a></li>
                        <li class="list-item">
                            <a href="#">淘宝</a></li>
                        <li class="list-item">
                            <a href="#">天猫</a></li>
                    </ul>
                </div>
            </div>
            <div>
                <h4>单行溢出...</h4>
                <div id="div-single-row">
                    新华社北京1月14日电（记者刘红霞）海关总署14日发布数据显示，我国2018年外贸进出口总值30.51万亿元，比2017年的历史高位多出2.7万亿元，同比增长9.7%，规模再创历史新高。
                </div>
            </div>

            <div>
                <h4>a标签背景</h4>
                <a href="www.taobao.com" id="taobao-a"></a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4" style="border: 1px solid #cccccc;font-weight: bold;">
            <h4>盒子模型</h4>
            <div>margin+border+padding+内容区（宽高）</div>
            <!--<div style="margin-top:10px;width: 370px;height: 160px;border: 1px solid #f40;z-index: -1;position: absolute"></div>-->
            <div style="position: relative;z-index: 1;height: 150px;width: 300px;border: 1px solid black">
                <div class="wuhan-b" style="border: 3px solid blue;position: absolute;left: 0;"></div>
                <div class="wuhan-b" style="border: 3px solid black;position: absolute;left: 74px;"></div>
                <div class="wuhan-b" style="border: 3px solid red;position: absolute;left: 148px;"></div>
                <div class="wuhan-b"
                     style="border: 3px solid yellow;position: absolute;left: 37px;top: 35px;z-index: 10"></div>
                <div class="wuhan-b"
                     style="border: 3px solid green;position: absolute;left: 111px;top: 35px;z-index: 10"></div>
            </div>
        </div>
        <div class="col-sm-4" style="border: 1px solid #cccccc;font-weight: bold">
            <ol type="a">
                <li>display:inline 行级元素 内联元素，span 内容决定所占位置，不可以css设置宽高</li>
                <li>display:block 块级元素div，独占一行，可能 CSS设置宽高</li>
                <li>display: 行级块元素,内容决定，可以改变宽高 img</li>
            </ol>
        </div>
        <div class="col-sm-4" style="border: 1px solid #cccccc;font-weight: bold">
            <ol type="a">
                <li>
                    <div class="center">text-align: center居中</div>
                </li>
                <li>
                    <div class="center" style="line-height: 1.2em">line-height 行高，比字体大的部分是行间距</div>
                </li>
                <li>
                    <div class="center" style="height:100px;line-height: 100px">水平垂直居中(垂直：line-height等于div高度)</div>
                </li>
                <li>
                    <div style="text-indent: 2em">段落前空格text-indent</div>
                </li>
                <li>
                    <div style="text-indent: 2em">段落前空格text-indent</div>
                </li>
                <li>
                    <div id="hoverDiy">hover 伪类选择器</div>
                </li>
                <li>
                    <div>
                        <div style="display:inline;text-decoration: underline">下划线</div>
                        <div style="display:inline;text-decoration: line-through">删除线</div>
                    </div>
                </li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-4" style="border: 1px solid #cccccc">
            <div class="center"><h2>圆角 border-radius </h2></div>
            <div class="hw100" id="radius1"></div>
            <div class="hw100" id="radius2"></div>
            <div class="hw100" id="radius3"></div>
        </div>
        <div class="col-sm-4" style="border: 1px solid #cccccc">
            <div class="center"><h2>border</h2></div>
            <div class="hw100" id="border1" style="text-align: center">不同边线</div>
            <div class="hw100" id="border2"></div>
            <div id="border3">transparent 透明色</div>
            <div id="border4"></div>
            <div id="border5"></div>
        </div>
        <div class="col-sm-4" style="border: 1px solid #cccccc">
            <ul>
                <li style="font-weight: bold;color: #00aa00">font-weight:bold 字体加粗（100-900）,color 字体颜色</li>
                <li style="font-family: sans-serif;font-style: italic;">font-style: italic; 斜体,font-family: 字体</li>
                <li style="font-family: sans-serif;font-size: 16px;">font-size: 16px; 字体大小 默认16</li>
            </ul>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6" style="border: 1px solid #cccccc">
            <div class="center"><h2>css 权重 </h2></div>
            <ol type="1">
                <li>行内 1000</li>
                <li>id选择器100</li>
                <li>class，属性，伪类 10</li>
                <li>标签 1</li>
                <li>* 0</li>
                <li>!important 无穷大</li>
            </ol>

        </div>
        <div class="col-sm-6" style="border: 1px solid #cccccc">
            <div class="center"><h2>选择器 </h2></div>
            <table class="table">
                <tbody>
                <tr>
                    <th>选择器</th>
                    <th>例子</th>
                    <th>例子描述</th>
                    <th style="width:5%;">CSS</th>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_class.asp" title="CSS .class 选择器">.<i>class</i></a></td>
                    <td>.intro</td>
                    <td>选择 class="intro" 的所有元素。</td>
                    <td>1</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_id.asp" title="CSS #id 选择器">#<i>id</i></a></td>
                    <td>#firstname</td>
                    <td>选择 id="firstname" 的所有元素。</td>
                    <td>1</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_all.asp" title="CSS * 选择器">*</a></td>
                    <td>*</td>
                    <td>选择所有元素。</td>
                    <td>2</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_element.asp" title="CSS element 选择器"><i>element</i></a></td>
                    <td>p</td>
                    <td>选择所有 &lt;p&gt; 元素。</td>
                    <td>1</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_element_comma.asp" title="CSS element,element 选择器"><i>element</i>,<i>element</i></a>
                    </td>
                    <td>div,p</td>
                    <td>(分组选择器)选择所有 &lt;div&gt; 元素和所有 &lt;p&gt; 元素。</td>
                    <td>1</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_element_element.asp" title="CSS element element 选择器"><i>element</i>
                        <i>element</i></a></td>
                    <td>div p</td>
                    <td>选择 &lt;div&gt; 元素内部的所有 &lt;p&gt; 元素。</td>
                    <td>1</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_element_gt.asp" title="CSS element>element 选择器"><i>element</i>&gt;<i>element</i></a>
                    </td>
                    <td>div&gt;p</td>
                    <td>选择父元素为 &lt;div&gt; 元素的所有 &lt;p&gt; 元素。</td>
                    <td>2</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_element_plus.asp" title="CSS element+element 选择器"><i>element</i>+<i>element</i></a>
                    </td>
                    <td>div+p</td>
                    <td>选择紧接在 &lt;div&gt; 元素之后的所有 &lt;p&gt; 元素。</td>
                    <td>2</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_attribute.asp" title="CSS [attribute] 选择器">[<i>attribute</i>]</a></td>
                    <td>[target]</td>
                    <td>选择带有 target 属性所有元素。</td>
                    <td>2</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_attribute_value.asp"
                           title="CSS [attribute=value] 选择器">[<i>attribute</i>=<i>value</i>]</a></td>
                    <td>[target=_blank]</td>
                    <td>选择 target="_blank" 的所有元素。</td>
                    <td>2</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_attribute_value_contain.asp" title="CSS [attribute~=value] 选择器">[<i>attribute</i>~=<i>value</i>]</a>
                    </td>
                    <td>[title~=flower]</td>
                    <td>选择 title 属性包含单词 "flower" 的所有元素。</td>
                    <td>2</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_attribute_value_start.asp" title="CSS [attribute|=value] 选择器">[<i>attribute</i>|=<i>value</i>]</a>
                    </td>
                    <td>[lang|=en]</td>
                    <td>选择 lang 属性值以 "en" 开头的所有元素。</td>
                    <td>2</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_link.asp" title="CSS :link 选择器">:link</a></td>
                    <td>a:link</td>
                    <td>选择所有未被访问的链接。</td>
                    <td>1</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_visited.asp" title="CSS :visited 选择器">:visited</a></td>
                    <td>a:visited</td>
                    <td>选择所有已被访问的链接。</td>
                    <td>1</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_active.asp" title="CSS :active 选择器">:active</a></td>
                    <td>a:active</td>
                    <td>选择活动链接。</td>
                    <td>1</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_hover.asp" title="CSS :hover 选择器">:hover</a></td>
                    <td>a:hover</td>
                    <td>选择鼠标指针位于其上的链接。</td>
                    <td>1</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_focus.asp" title="CSS :focus 选择器">:focus</a></td>
                    <td>input:focus</td>
                    <td>选择获得焦点的 input 元素。</td>
                    <td>2</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_first-letter.asp" title="CSS :first-letter 选择器">:first-letter</a></td>
                    <td>p:first-letter</td>
                    <td>选择每个 &lt;p&gt; 元素的首字母。</td>
                    <td>1</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_first-line.asp" title="CSS :first-line 选择器">:first-line</a></td>
                    <td>p:first-line</td>
                    <td>选择每个 &lt;p&gt; 元素的首行。</td>
                    <td>1</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_first-child.asp" title="CSS :first-child 选择器">:first-child</a></td>
                    <td>p:first-child</td>
                    <td>选择属于父元素的第一个子元素的每个 &lt;p&gt; 元素。</td>
                    <td>2</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_before.asp" title="CSS :before 选择器">:before</a></td>
                    <td>p:before</td>
                    <td>在每个 &lt;p&gt; 元素的内容之前插入内容。</td>
                    <td>2</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_after.asp" title="CSS :after 选择器">:after</a></td>
                    <td>p:after</td>
                    <td>在每个 &lt;p&gt; 元素的内容之后插入内容。</td>
                    <td>2</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_lang.asp" title="CSS :lang(language) 选择器">:lang(<i>language</i>)</a>
                    </td>
                    <td>p:lang(it)</td>
                    <td>选择带有以 "it" 开头的 lang 属性值的每个 &lt;p&gt; 元素。</td>
                    <td>2</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_gen_sibling.asp" title="CSS element1~element2 选择器"><i>element1</i>~<i>element2</i></a>
                    </td>
                    <td>p~ul</td>
                    <td>选择前面有 &lt;p&gt; 元素的每个 &lt;ul&gt; 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_attr_begin.asp" title="CSS [attribute^=value] 选择器">[<i>attribute</i>^=<i>value</i>]</a>
                    </td>
                    <td>a[src^="https"]</td>
                    <td>选择其 src 属性值以 "https" 开头的每个 &lt;a&gt; 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_attr_end.asp"
                           title="CSS [attribute$=value] 选择器">[<i>attribute</i>$=<i>value</i>]</a></td>
                    <td>a[src$=".pdf"]</td>
                    <td>选择其 src 属性以 ".pdf" 结尾的所有 &lt;a&gt; 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_attr_contain.asp" title="CSS [attribute*=value] 选择器">[<i>attribute</i>*=<i>value</i>]</a>
                    </td>
                    <td>a[src*="abc"]</td>
                    <td>选择其 src 属性中包含 "abc" 子串的每个 &lt;a&gt; 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_first-of-type.asp" title="CSS :first-of-type 选择器">:first-of-type</a>
                    </td>
                    <td>p:first-of-type</td>
                    <td>选择属于其父元素的首个 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_last-of-type.asp" title="CSS :last-of-type 选择器">:last-of-type</a></td>
                    <td>p:last-of-type</td>
                    <td>选择属于其父元素的最后 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_only-of-type.asp" title="CSS :only-of-type 选择器">:only-of-type</a></td>
                    <td>p:only-of-type</td>
                    <td>选择属于其父元素唯一的 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_only-child.asp" title="CSS :only-child 选择器">:only-child</a></td>
                    <td>p:only-child</td>
                    <td>选择属于其父元素的唯一子元素的每个 &lt;p&gt; 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_nth-child.asp" title="CSS :nth-child(n) 选择器">:nth-child(<i>n</i>)</a>
                    </td>
                    <td>p:nth-child(2)</td>
                    <td>选择属于其父元素的第二个子元素的每个 &lt;p&gt; 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_nth-last-child.asp" title="CSS :nth-last-child(n) 选择器">:nth-last-child(<i>n</i>)</a>
                    </td>
                    <td>p:nth-last-child(2)</td>
                    <td>同上，从最后一个子元素开始计数。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_nth-of-type.asp" title="CSS :nth-of-type(n) 选择器">:nth-of-type(<i>n</i>)</a>
                    </td>
                    <td>p:nth-of-type(2)</td>
                    <td>选择属于其父元素第二个 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_nth-last-of-type.asp" title="CSS :nth-last-of-type(n) 选择器">:nth-last-of-type(<i>n</i>)</a>
                    </td>
                    <td>p:nth-last-of-type(2)</td>
                    <td>同上，但是从最后一个子元素开始计数。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_last-child.asp" title="CSS :last-child 选择器">:last-child</a></td>
                    <td>p:last-child</td>
                    <td>选择属于其父元素最后一个子元素每个 &lt;p&gt; 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_root.asp" title="CSS :root 选择器">:root</a></td>
                    <td>:root</td>
                    <td>选择文档的根元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_empty.asp" title="CSS :empty 选择器">:empty</a></td>
                    <td>p:empty</td>
                    <td>选择没有子元素的每个 &lt;p&gt; 元素（包括文本节点）。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_target.asp" title="CSS :target 选择器">:target</a></td>
                    <td>#news:target</td>
                    <td>选择当前活动的 #news 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_enabled.asp" title="CSS :enabled 选择器">:enabled</a></td>
                    <td>input:enabled</td>
                    <td>选择每个启用的 &lt;input&gt; 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_disabled.asp" title="CSS :disabled 选择器">:disabled</a></td>
                    <td>input:disabled</td>
                    <td>选择每个禁用的 &lt;input&gt; 元素</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_checked.asp" title="CSS :checked 选择器">:checked</a></td>
                    <td>input:checked</td>
                    <td>选择每个被选中的 &lt;input&gt; 元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_not.asp" title="CSS :not(selector) 选择器">:not(<i>selector</i>)</a></td>
                    <td>:not(p)</td>
                    <td>选择非 &lt;p&gt; 元素的每个元素。</td>
                    <td>3</td>
                </tr>

                <tr>
                    <td><a href="/cssref/selector_selection.asp" title="CSS ::selection 选择器">::selection</a></td>
                    <td>::selection</td>
                    <td>选择被用户选取的元素部分。</td>
                    <td>3</td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>
</div>

</body>
</html>